
<style lang="scss" scoped>
#Home {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f9fa;
  margin: 0 auto;
  .Home_header {
    width: 100%;
  }
  .Home_recommend {
    margin: 30px auto;
    width: 100%;
    h2 {
      text-align: center;
    }
    .Home_novel_data_ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      width: 1200px;
      margin: 30px auto;
      li {
        list-style: none;
        width: 200px;
      }
      h6 {
        margin-top: 20px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #000;
      }
      p {
        margin-top: 4px;
        font-size: 14px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>
<template>
  <div id="Home">
    <header class="Home_header">
      <Homeview />
    </header>
    <div class="Home_Rotation_chart">
      <div id="carouselExampleCaptions" class="carousel w1200 slide">
        <div class="carousel-indicators">
          <button
            type="button"
            data-bs-target="#carouselExampleCaptions"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleCaptions"
            data-bs-slide-to="1"
            aria-label="Slide 2"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleCaptions"
            data-bs-slide-to="2"
            aria-label="Slide 3"
          ></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="../assets/index/shiyu_index_img2.jpg" class="d-block w1200" alt="..." />
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="../assets/index/shiyu_img2.jpg" class="d-block w1200" alt="..." />
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="../assets/index/shiyu_index_img1.jpg" class="d-block w1200" alt="..." />
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <div class="Home_recommend">
      <h2>主编力荐</h2>
      <ul class="Home_novel_data_ul ">
        <li
          @click="LinkNover(item.ID)"
          v-for="item in state.novelDataLi"
          :key="item.ID"
          :data-id="item.ID"
        >
        <router-link :to="`/page/${item.ID}`">
          <div class="image-container">
            <img :src="item.url_img" alt="亲，图片加载失败了哦~" />
          </div>
          <aside>
            <h6>{{ item.articlename }}</h6>
            <p>{{ item.author }}</p>
          </aside>
        </router-link>
          
        </li>
      </ul>
    </div>
    <!-- 第五部分 -->
    <div class="Home_Ranking">
      <ScrollContainer />
    </div>

  </div>
</template>
<script lang="ts" setup>
import Homeview from '../components/Home.vue'
import ScrollContainer from '../components/ScrollContainer.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// 导入接口
import { novelData } from '../axios/modules/get'
const route = useRouter()
const state = reactive({
  novelDataLi: [] // 定义一个响应式变量list
})
// 小说随机接口
novelData({page: 2,size: 60}).then((res) => {
  state.novelDataLi = res.data
})
</script>



